<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>英语单词记忆游戏 - 智习伴</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/3.0.24/tailwind.min.css">
    <link rel="stylesheet" href="static/css/style.css">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <style>
        .game-container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .progress-bar {
            height: 8px;
            background-color: #e5e7eb;
            border-radius: 4px;
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            background-color: #3b82f6;
            transition: width 0.3s ease;
        }
        
        .timer-circle {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 5px solid #e5e7eb;
            border-top-color: #3b82f6;
            animation: spin 10s linear infinite;
            margin: 0 auto;
        }
        
        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }
        
        .timer-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 24px;
            font-weight: bold;
        }
        
        .timer-container {
            position: relative;
            width: 100px;
            height: 100px;
            margin: 0 auto 20px;
        }
        
        .hidden {
            display: none;
        }
        
        .correct {
            color: #10b981;
            font-weight: bold;
        }
        
        .incorrect {
            color: #ef4444;
            font-weight: bold;
        }
        
        .fade-in {
            animation: fadeIn 0.5s;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
    </style>
</head>
<body class="bg-gray-100 bg-pattern min-h-screen">
    <div class="game-container">
        <header class="text-center mb-8">
            <h1 class="text-3xl font-bold text-gray-800">英语单词记忆游戏</h1>
            <p class="text-gray-600 mt-2">每轮5题，每题限时10秒，快来挑战你的词汇量吧！</p>
        </header>
        
        <!-- 开始页面 -->
        <div id="startPage" class="text-center bg-white rounded-lg shadow-md p-8 fade-in">
            <h2 class="text-2xl font-bold mb-4">准备开始游戏</h2>
            <p class="text-gray-600 mb-6">游戏规则：</p>
            <ul class="text-left text-gray-600 mb-6 mx-auto max-w-md">
                <li class="mb-2">• 每轮共5道题目</li>
                <li class="mb-2">• 每题限时10秒</li>
                <li class="mb-2">• 根据中文释义输入英文单词</li>
                <li class="mb-2">• 答对得分，答错显示正确答案</li>
                <li class="mb-2">• 全部完成后显示成绩和错误单词</li>
            </ul>
            <button id="startButton" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-full transition duration-300 transform hover:scale-105">
                开始游戏
            </button>
        </div>
        
        <!-- 游戏页面 -->
        <div id="gamePage" class="hidden bg-white rounded-lg shadow-md p-8">
            <div class="flex justify-between items-center mb-6">
                <div class="text-lg font-bold">得分: <span id="score">0</span></div>
                <div class="text-lg font-bold">题目: <span id="currentQuestion">1</span>/<span id="totalQuestions">5</span></div>
            </div>
            
            <div class="progress-bar mb-6">
                <div id="progressFill" class="progress-fill" style="width: 20%"></div>
            </div>
            
            <div class="timer-container">
                <div class="timer-circle" id="timerCircle"></div>
                <div class="timer-text" id="timerText">10</div>
            </div>
            
            <div class="text-center mb-8">
                <h3 class="text-2xl font-bold text-gray-800 mb-4">请输入对应的英文单词</h3>
                <p id="chineseWord" class="text-xl text-gray-700 mb-6"></p>
                <input 
                    type="text" 
                    id="answerInput" 
                    class="w-full max-w-md mx-auto form-input text-center text-lg py-3"
                    placeholder="在此输入英文单词"
                    autocomplete="off"
                    autofocus
                >
                <button 
                    id="submitAnswer" 
                    class="mt-4 bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-6 rounded-full transition duration-300 transform hover:scale-105"
                >
                    提交答案 (回车)
                </button>
            </div>
            
            <div id="feedback" class="text-center mt-6 h-10"></div>
        </div>
        
        <!-- 结果页面 -->
        <div id="resultPage" class="hidden text-center bg-white rounded-lg shadow-md p-8">
            <h2 class="text-2xl font-bold mb-4">游戏结束</h2>
            <div class="text-5xl font-bold mb-6" id="finalScore">0</div>
            <p class="text-gray-600 mb-6">恭喜完成本轮挑战！</p>
            
            <div id="wrongWords" class="mb-8">
                <h3 class="text-xl font-bold mb-4">答错的单词</h3>
                <div id="wrongWordsList" class="text-left max-w-md mx-auto"></div>
            </div>
            
            <button id="restartButton" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-full transition duration-300 transform hover:scale-105">
                再玩一次
            </button>
        </div>
    </div>

    <script>
        // 单词库
        const vocabulary = [
            { english: "abandon", chinese: "放弃，抛弃" },
            { english: "ability", chinese: "能力，才能" },
            { english: "absence", chinese: "缺席，不在场" },
            { english: "absolute", chinese: "绝对的，完全的" },
            { english: "absorb", chinese: "吸收，吸引" },
            { english: "abstract", chinese: "抽象的，摘要" },
            { english: "abundant", chinese: "丰富的，充裕的" },
            { english: "abuse", chinese: "滥用，虐待" },
            { english: "academic", chinese: "学术的，学院的" },
            { english: "accelerate", chinese: "加速，促进" },
            { english: "access", chinese: "接近，入口" },
            { english: "accident", chinese: "事故，意外" },
            { english: "accompany", chinese: "陪伴，伴随" },
            { english: "accomplish", chinese: "完成，实现" },
            { english: "account", chinese: "账户，解释" },
            { english: "accumulate", chinese: "积累，堆积" },
            { english: "accurate", chinese: "准确的，精确的" },
            { english: "accuse", chinese: "指责，控告" },
            { english: "achieve", chinese: "实现，达到" },
            { english: "acknowledge", chinese: "承认，答谢" },
            { english: "acquire", chinese: "获得，取得" },
            { english: "adapt", chinese: "适应，改编" },
            { english: "adequate", chinese: "充足的，适当的" },
            { english: "adjust", chinese: "调整，调节" },
            { english: "admire", chinese: "钦佩，赞美" },
            { english: "admit", chinese: "承认，准许进入" },
            { english: "adopt", chinese: "采用，收养" },
            { english: "advance", chinese: "前进，进步" },
            { english: "advantage", chinese: "优势，好处" },
            { english: "adventure", chinese: "冒险，奇遇" },
            { english: "advertise", chinese: "做广告，宣传" },
            { english: "affair", chinese: "事务，事件" },
            { english: "affect", chinese: "影响，感动" },
            { english: "afford", chinese: "负担得起，提供" },
            { english: "agent", chinese: "代理人，代理商" },
            { english: "aggressive", chinese: "侵略的，好斗的" },
            { english: "agree", chinese: "同意，一致" },
            { english: "aid", chinese: "帮助，援助" },
            { english: "aim", chinese: "目标，瞄准" },
            { english: "alarm", chinese: "警报，闹钟" },
            { english: "alter", chinese: "改变，修改" },
            { english: "amaze", chinese: "使惊奇，使惊讶" },
            { english: "ambition", chinese: "野心，雄心" },
            { english: "amount", chinese: "数量，总额" },
            { english: "analyze", chinese: "分析，研究" },
            { english: "ancestor", chinese: "祖先，祖宗" },
            { english: "anger", chinese: "愤怒，生气" },
            { english: "announce", chinese: "宣布，宣告" },
            { english: "annual", chinese: "每年的，年度的" },
            { english: "anticipate", chinese: "预期，期望" },
            { english: "anxiety", chinese: "焦虑，担心" },
            { english: "apart", chinese: "分开，分离" },
            { english: "apology", chinese: "道歉，谢罪" },
            { english: "appeal", chinese: "呼吁，上诉" },
            { english: "appear", chinese: "出现，显得" },
            { english: "applaud", chinese: "鼓掌，称赞" },
            { english: "apply", chinese: "申请，应用" },
            { english: "appoint", chinese: "任命，指定" },
            { english: "approach", chinese: "接近，方法" },
            { english: "appropriate", chinese: "适当的，合适的" },
            { english: "approve", chinese: "批准，赞成" },
            { english: "argue", chinese: "争论，论证" },
            { english: "arise", chinese: "出现，发生" },
            { english: "arrange", chinese: "安排，整理" },
            { english: "arrest", chinese: "逮捕，拘留" },
            { english: "arrive", chinese: "到达，到来" },
            { english: "ashamed", chinese: "羞愧的，惭愧的" },
            { english: "aspect", chinese: "方面，外观" },
            { english: "assemble", chinese: "集合，组装" },
            { english: "assess", chinese: "评估，评定" },
            { english: "assign", chinese: "分配，指派" },
            { english: "assist", chinese: "帮助，协助" },
            { english: "assume", chinese: "假设，承担" },
            { english: "assure", chinese: "保证，确信" },
            { english: "astonish", chinese: "使惊讶，使吃惊" },
            { english: "attach", chinese: "附加，贴上" },
            { english: "attack", chinese: "攻击，抨击" },
            { english: "attempt", chinese: "尝试，企图" },
            { english: "attend", chinese: "出席，照顾" },
            { english: "attitude", chinese: "态度，看法" },
            { english: "attract", chinese: "吸引，引起" },
            { english: "authority", chinese: "权威，当局" },
            { english: "available", chinese: "可获得的，有空的" },
            { english: "average", chinese: "平均的，普通的" },
            { english: "avoid", chinese: "避免，回避" },
            { english: "award", chinese: "奖品，授予" },
            { english: "aware", chinese: "意识到的，知道的" },
            { english: "awkward", chinese: "笨拙的，尴尬的" }
        ];

        // 游戏状态
        const gameState = {
            currentQuestion: 0,
            score: 0,
            wrongWords: [],
            questions: [],
            timer: null,
            timeLeft: 10
        };

        // DOM 元素
        const elements = {
            startPage: document.getElementById('startPage'),
            gamePage: document.getElementById('gamePage'),
            resultPage: document.getElementById('resultPage'),
            startButton: document.getElementById('startButton'),
            restartButton: document.getElementById('restartButton'),
            chineseWord: document.getElementById('chineseWord'),
            answerInput: document.getElementById('answerInput'),
            submitAnswer: document.getElementById('submitAnswer'),
            score: document.getElementById('score'),
            currentQuestion: document.getElementById('currentQuestion'),
            totalQuestions: document.getElementById('totalQuestions'),
            progressFill: document.getElementById('progressFill'),
            timerText: document.getElementById('timerText'),
            timerCircle: document.getElementById('timerCircle'),
            feedback: document.getElementById('feedback'),
            finalScore: document.getElementById('finalScore'),
            wrongWordsList: document.getElementById('wrongWordsList')
        };

        // 初始化游戏
        function initGame() {
            elements.startButton.addEventListener('click', startGame);
            elements.restartButton.addEventListener('click', startGame);
            elements.submitAnswer.addEventListener('click', checkAnswer);
            elements.answerInput.addEventListener('keyup', function(e) {
                if (e.key === 'Enter') {
                    checkAnswer();
                }
            });
        }

        // 开始游戏
        function startGame() {
            // 重置游戏状态
            gameState.currentQuestion = 0;
            gameState.score = 0;
            gameState.wrongWords = [];
            gameState.questions = getRandomQuestions(5);
            
            // 更新UI
            elements.score.textContent = '0';
            elements.currentQuestion.textContent = '1';
            elements.totalQuestions.textContent = '5';
            elements.progressFill.style.width = '20%';
            
            // 切换到游戏页面
            elements.startPage.classList.add('hidden');
            elements.resultPage.classList.add('hidden');
            elements.gamePage.classList.remove('hidden');
            
            // 开始第一题
            loadQuestion();
        }

        // 获取随机题目
        function getRandomQuestions(count) {
            // 创建单词数组的副本
            const shuffled = [...vocabulary].sort(() => 0.5 - Math.random());
            return shuffled.slice(0, count);
        }

        // 加载题目
        function loadQuestion() {
            // 重置计时器
            clearInterval(gameState.timer);
            gameState.timeLeft = 10;
            elements.timerText.textContent = gameState.timeLeft;
            elements.timerCircle.style.animation = 'none';
            setTimeout(() => {
                elements.timerCircle.style.animation = 'spin 10s linear infinite';
            }, 10);
            
            // 清空输入和反馈
            elements.answerInput.value = '';
            elements.feedback.textContent = '';
            elements.answerInput.disabled = false;
            elements.submitAnswer.disabled = false;
            
            // 显示当前题目
            const question = gameState.questions[gameState.currentQuestion];
            elements.chineseWord.textContent = question.chinese;
            elements.currentQuestion.textContent = gameState.currentQuestion + 1;
            
            // 更新进度条
            const progress = ((gameState.currentQuestion + 1) / 5) * 100;
            elements.progressFill.style.width = `${progress}%`;
            
            // 开始计时
            startTimer();
            
            // 聚焦输入框
            setTimeout(() => {
                elements.answerInput.focus();
            }, 100);
        }

        // 开始计时
        function startTimer() {
            gameState.timer = setInterval(() => {
                gameState.timeLeft--;
                elements.timerText.textContent = gameState.timeLeft;
                
                if (gameState.timeLeft <= 0) {
                    clearInterval(gameState.timer);
                    timeUp();
                }
            }, 1000);
        }

        // 时间到
        function timeUp() {
            const question = gameState.questions[gameState.currentQuestion];
            gameState.wrongWords.push({
                english: question.english,
                chinese: question.chinese,
                userAnswer: ''
            });
            
            showFeedback(`时间到！正确答案是: ${question.english}`, 'incorrect');
            
            setTimeout(() => {
                nextQuestion();
            }, 1500);
        }

        // 检查答案
        function checkAnswer() {
            clearInterval(gameState.timer);
            
            const userAnswer = elements.answerInput.value.trim().toLowerCase();
            const correctAnswer = gameState.questions[gameState.currentQuestion].english.toLowerCase();
            
            elements.answerInput.disabled = true;
            elements.submitAnswer.disabled = true;
            
            if (userAnswer === correctAnswer) {
                gameState.score++;
                elements.score.textContent = gameState.score;
                showFeedback('正确！', 'correct');
            } else {
                gameState.wrongWords.push({
                    english: gameState.questions[gameState.currentQuestion].english,
                    chinese: gameState.questions[gameState.currentQuestion].chinese,
                    userAnswer: userAnswer
                });
                showFeedback(`错误！正确答案是: ${gameState.questions[gameState.currentQuestion].english}`, 'incorrect');
            }
            
            setTimeout(() => {
                nextQuestion();
            }, 1500);
        }

        // 显示反馈
        function showFeedback(message, className) {
            elements.feedback.textContent = message;
            elements.feedback.className = `text-center mt-6 h-10 ${className} fade-in`;
        }

        // 下一题
        function nextQuestion() {
            gameState.currentQuestion++;
            
            if (gameState.currentQuestion < 5) {
                loadQuestion();
            } else {
                showResults();
            }
        }

        // 显示结果
        function showResults() {
            elements.gamePage.classList.add('hidden');
            elements.finalScore.textContent = gameState.score;
            
            // 显示错误单词
            if (gameState.wrongWords.length > 0) {
                let wrongWordsHTML = '<ul class="space-y-2">';
                gameState.wrongWords.forEach(word => {
                    wrongWordsHTML += `
                        <li class="flex justify-between items-center p-2 bg-gray-50 rounded">
                            <span>${word.chinese}</span>
                            <div>
                                <span class="text-red-500 line-through">${word.userAnswer || '未作答'}</span>
                                <span class="mx-2">→</span>
                                <span class="text-green-500 font-bold">${word.english}</span>
                            </div>
                        </li>
                    `;
                });
                wrongWordsHTML += '</ul>';
                elements.wrongWordsList.innerHTML = wrongWordsHTML;
            } else {
                elements.wrongWordsList.innerHTML = '<p class="text-green-500 font-bold">恭喜！全部答对！</p>';
            }
            
            elements.resultPage.classList.remove('hidden');
        }

        // 页面加载完成后初始化游戏
        document.addEventListener('DOMContentLoaded', initGame);
    </script>
</body>
</html>